<template>
  <div class="application-container">
    <component :menuList="this.menuList" :is="layoutName"></component>
  </div>
</template>
<script>
import MainLayout from "./common/mainLayout.vue";
import MainBlank from "./common/mainBlank.vue";
export default {
  components: { MainLayout, MainBlank },
  computed: {
    layoutName() {
      return this.$route.meta.Layout || "main-layout";
    },
    menuList() {
      return this.$store.getters["common/menuList"]
    },
  },
  watch: {
    menuList: {
      immediate: true,
      handler() {
        this.$store.getters["common/menuList"].map((it) => {
          if (!!it.path) {
            this.$router.addRoute({
              path: it.path,
              component: () => import("." + it.path),
            });
          }
        });

      },
    },
  },
};
</script>
<style scoped>
.application-container {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f8f8f8;
  z-index: 99;
}
</style>
